import { Col, Row, Card, Tooltip } from 'antd';
import { connect } from 'umi';
import '../common/styles.less';
import { ContractHomeView } from './ContractHomeView';
import ScrollBarLayoutNotScroll from '@/components/ScrollBarLayoutNotScroll';
import { CommonFunctionView } from './CommonFunctionView';
import { EchartList } from './EchartList';
import { getAssetsNumber } from '../services';
import { history } from 'umi';
import pageStyles from '@/common/pageLayout.less';
import imgData from '../../../../../public/image/gateway.png';

const PurchaseGateway = ({ curRes }) => {
  const gridStyle: any = {
    overflow: 'hidden',
    position: 'relative',
    width: '100%',
    textAlign: 'left',
    background: '#fff',
    padding: '0',
    height: '100px',
    borderRadius: '10px',
  };

  const textStyle: any = {
    margin: '0',
    padding: '8px 0 0 15px',
  };

  const numStyle: any = {
    margin: '0',
    fontSize: '40px',
    paddingLeft: '15px',
  };

  const { AssetsNumber } = getAssetsNumber(curRes);

  // 样式
  const styleFixCls = 'contract-homepage-';
  return (
    <>
      <div className={styleFixCls + 'RootDiv'}>
        <ScrollBarLayoutNotScroll style={{ padding: 0 }}>
          <div style={{ marginBottom: 8 }}>
            <Row
              className={'one-icon'}
              gutter={[8, 8]}
              style={{
                height: '100px',
              }}
            >
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/maintenanceCountController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>当月维保到期资产</p>
                  <p style={numStyle}>{AssetsNumber?.obj?.maintainTimeoutNum ? AssetsNumber?.obj?.maintainTimeoutNum : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/assetMaintenanceController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>报修资产数</p>
                  <p style={numStyle}>{AssetsNumber?.obj?.repairNum ? AssetsNumber?.obj?.repairNum : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/assetAllotController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>待确认调拨单</p>
                  <p style={numStyle}>{AssetsNumber?.obj?.allocateNum ? AssetsNumber?.obj?.allocateNum : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/assetTypeCountController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>资产总金额</p>
                  {/* <Tooltip title={AssetsNumber?.obj?.assetAmount ? AssetsNumber?.obj?.assetAmount : '0'}>
                    <p style={numStyle} className={pageStyles['over-flow-hidden']}>
                      {AssetsNumber?.obj?.assetAmount ? AssetsNumber?.obj?.assetAmount : '0'}
                    </p>
                  </Tooltip> */}
                  <p style={numStyle}>{AssetsNumber?.obj?.assetAmount ? AssetsNumber?.obj?.assetAmount : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/inventoryPlanController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>待盘点任务数量</p>
                  <p style={numStyle}>{AssetsNumber?.obj?.inventoryTaskNum ? AssetsNumber?.obj?.inventoryTaskNum : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
              <Col span={4} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <Card.Grid
                  style={gridStyle}
                  onClick={() => {
                    history.push({
                      pathname: `/myAssetController/manage`,
                    });
                  }}
                >
                  <p style={textStyle}>资产总数</p>
                  <p style={numStyle}>{AssetsNumber?.obj?.assetNum ? AssetsNumber?.obj?.assetNum : '0'}</p>
                  <img style={{ width: '120%', height: '20px', position: 'absolute', bottom: '0px' }} src={imgData} alt="" />
                </Card.Grid>
              </Col>
            </Row>
          </div>
          <div style={{ marginBottom: 8 }}>
            <Row gutter={[8, 8]}>
              <Col span={18} style={{ borderRadius: '10px' }} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <ContractHomeView curRes={curRes} />
              </Col>
              <Col span={6} className={styleFixCls + 'RootDiv-ColSpanA'}>
                <CommonFunctionView curRes={curRes} />
              </Col>
            </Row>
          </div>
          {/* 图表组件 */}
          <EchartList curRes={curRes} />
        </ScrollBarLayoutNotScroll>
      </div>
    </>
  );
};

export default connect(({ baseLogin }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
}))(PurchaseGateway);
